<template>
  <!--电核专员-->
  <div class="first_audit">
    <div class="data_list">
      <el-table :data="tableData" :max-height="tableMaxHeight" style="width: 100%">
        <el-table-column align="left" label="账号名称" prop="userName" :label="$t('common.accountName')">
          <template slot-scope="scope">
            <a href="javascript:void(0);" @click="searchOrder(scope.row)">{{ scope.row.userName }}</a>
          </template>
        </el-table-column>
        <el-table-column align="left" label="角色类型" prop="typeIdName" :label="$t('common.roleType')">
          <template slot-scope="scope">{{ $root.local == 'zhCN' ? scope.row.roleName : scope.row.typeIdName }}</template>
        </el-table-column>
        <el-table-column align="left" label="所属组别" prop="leader" :label="$t('authority.ownGroup')"></el-table-column>
        <el-table-column align="left" label="剩余单量" prop="remainOrderCount" :label="$t('authority.remainingOrder')"></el-table-column>
        <el-table-column align="left" label="每日进件上限" prop="maxNum" :label="$t('authority.everydayLimit')">
          <template slot-scope="scope">
            <span @click="showSetNum(scope.row)"><i class="el-icon-edit"></i>{{ scope.row.maxNum }}</span>
          </template>
        </el-table-column>
        <el-table-column align="left" label="是否进件" prop="entrySwitch" :label="$t('common.isAssignOrder')">
          <template slot-scope="scope"><el-switch @change="changeStatus(scope.row)" v-model="scope.row.entrySwitch">是否进件</el-switch></template>
        </el-table-column><!--是否进件-->
        <el-table-column align="left" label="去分组" :label="$t('authority.doGroup')" min-width="120">
          <template slot-scope="scope"><el-button @click="showGroupDialog(scope.row)" type="text">{{$t('authority.verifyGroup')}}</el-button></template>
        </el-table-column><!--去分组-->
      </el-table><!--end table-->
    </div>

    <pagination @pageChange="pageChange" :page="page">分页组件</pagination>

    <!--设置每日进件上限-->
    <alert-dialog title="设置每日进件上限" :visible.sync="showNumDialog" width="416px" :title="$t('authority.setEverydayUpperCase')">
      <el-form ref="form" :model="form" :rules="rules" label-position="top">
        <el-form-item label="每日进件上限" prop="maxNum" :label="$t('authority.everydayLimit')">
          <el-input v-model="form.maxNum" type="text" placeholder="每日进件上限" :placeholder="$t('authority.everydayLimit')"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="showNumDialog = false" type="default">{{$t('common.cancel')}}</el-button>
        <el-button @click="setNum" type="primary">{{$t('common.submit')}}</el-button>
      </div>
    </alert-dialog><!--设置每日进件上限end-->

    <alert-dialog title="电核人员分组" :visible.sync="showSetGroupDialog" width="416px" :title="$t('tel.telAssitantGroup')">
      <el-form ref="form" :model="groupForm" label-position="top">
        <el-form-item label="账号名称" :label="$t('common.accountName')">
          <el-input :disabled="true" v-model="groupForm.userName" type="text" placeholder="账号名称" :placeholder="$t('common.accountName')">=</el-input>
        </el-form-item>
        <el-form-item label="组别列表" :label="$t('authority.groupList')">
          <el-select v-model="groupForm.leaderId" placeholder="请选择组别" :placeholder="$t('authority.chooseGroup')" style="width: 100%;">
            <el-option v-for="item in captainList" :key="item.userId" :value="item.userId" :label="item.userName"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="showSetGroupDialog = false" type="default">{{$t('common.cancel')}}</el-button>
        <el-button @click="setGroup" type="primary">{{$t('common.save')}}</el-button>
      </div>
    </alert-dialog>
    <!--修改分组end-->
  </div>
</template>

<script>
  import Pagination from '@/components/pagination';
  import mixin from '@/service/mixin';
  import AlertDialog from '@/components/alert-dialog';
  import storage from '@/libs/storage';

  export default {
    name: 'customAssistant',
    components: {
      Pagination,
      AlertDialog
    },
    mixins: [mixin],
    props: {
      activeTab: {
        type: String,
        required: true
      },
      searchForm: {
        type: Object,
        required: true
      },
    },
    data() {
      return {
        isCaptain: {
          type: Boolean,
          required: true
        },
        thisRoleType: 1,
        form: {
          // auditorId: '',
          userId: '',
          maxNum: ''
        },
        showNumDialog: false,
        rules: {
          maxNum: [
            { required: true, message: this.$t('authority.everydayCase'), trigger: 'blur' },
            { pattern: /^\d+$/, message: this.$t('verify.inputInteger'), trigger: 'blur' }
          ]
        },
        showSetGroupDialog: false,
        groupForm: {
          userId: '', // 电核专员id
          userName: '',
          leaderId: '', // 新组别Id
        },
        captainList: []
      };
    },
    watch: {
      activeTab(val) {
        if ('customAssistant' === val) {
          this.page.currentPage = 1;
          this.getTableData();
          if (this.captainList.length === 0) {
            this.getCaptainList();
          }
        }
      },
      'searchForm.search'(val) {
        if (val && this.activeTab === 'customAssistant') {
          this.page.currentPage = 1;
          this.getTableData();
        }
      }
    },
    methods: {
      getTableData(page = this.page) {
        const params = {
          roleId: this.thisRoleType,
          userName: this.searchForm.userName,
          leaderId: '',
          loginId: storage.get('user').id,
          page: {
            pageNo: page.currentPage,
            pageSize: this.page.pageSize
          }
        };
        this.tableData = [];
        this.$api.tel.getAllUserInfo(params).then((res) => {
          const { status, data, error } = res;
          if ('1' === status && '00000000' === error && data.data) {
            this.tableData = data.data;
            this.page.recordsTotal = data.pageCount;
            this.tableData.forEach((item) => {
              item.entrySwitch = +item.entrySwitch === 1;
            });
            if (this.searchForm.search) {
              this.$emit('search', this.searchForm);
            }
            this.tableMaxHeight = window.document.body.clientHeight - 265;
          }
        });
      },
      changeStatus(row) {
        const params = {
          userId: row.userId,
          entrySwitch: row.entrySwitch ? '1' : '0'
        };
        this.$api.tel.updateUserInfo(params).then((res) => {
          const { status, error } = res;
          if ('1' === status && '00000000' === error) {
            this.$message.success(this.$t('authority.settingSucc'));
            this.getTableData();
          }
        });
      },
      setNum() {
        this.$refs.form.validate((val) => {
          if (val) {
            const params = {
              userId: this.form.userId,
              maxNum: this.form.maxNum
            };
            this.$api.tel.updateUserInfo(params).then((res) => {
              const { status, data, error } = res;
              if ('1' === status && '00000000' === error) {
                this.showNumDialog = false;
                this.$message.success(this.$t('authority.settingSucc'));
                this.getTableData();
              }
            });
          }
        });
      },
      showSetNum(row) {
        this.form.userId = row.userId;
        this.form.maxNum = row.maxNum;
        this.showNumDialog = true;
      },
      showGroupDialog(row) {
        this.groupForm.userId = row.userId; // 电核专员id
        this.groupForm.userName = row.userName;
        this.groupForm.leaderId = row.leader; // 新组别id
        this.showSetGroupDialog = true;
      },
      // 电核专员分组
      setGroup() {
        const params = {
          userId: this.groupForm.userId,
          leaderId: this.groupForm.leaderId
        };
        this.$api.tel.changeUserGroup(params).then((res) => {
          const { status, data, error } = res;
          if ('1' === status && '00000000' === error) {
            this.showSetGroupDialog = false;
            this.$message.success(this.$t('authority.verifySucc'));
            this.getTableData();
          }
        });
      },
      // 获取所有的主管
      getCaptainList() {
        const params = {
          roleId: 2,
          userName: '',
          leaderId: '',
        };
        this.$api.tel.getAllUserInfo(params).then((res) => {
          const { status, data, error } = res;
          if ('1' === status && '00000000' === error && data.data) {
            this.captainList = data.data;
          }
        });
      },
      // 专员移单
      searchOrder(row) {
        this.$emit('getData', { userName: row.userName }, 'telOrderList');
      },
    },
    created() {
      if (this.activeTab === 'customAssistant') {
        this.getTableData();
      }
    }
  };
</script>

<style lang="scss" scoped>
  .data_list{
    background-color: #fff;
    padding: 10px 16px;
  }
</style>
